<template>

    <!-- 搜索框 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button class="bot">重置</el-button>
                <!-- -->
                <el-button class="bot" type="primary" @click="searchFn">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <!-- :model="listParams" -->
            <el-form ref="searchFormRef">
                <el-form-item label="品牌名称:">
                    <!-- @keyup.enter 回车事件 -->
                    <!--  -->
                    <el-input placeholder="品牌名称" v-model="listparams.brandName" />
                </el-form-item>
                <el-form-item label="推荐状态:">
                    <!-- 优惠卷选择器 -->
                    <!--  -->
                    <el-select v-model="value" clearable placeholder="全部" @change="selectFn">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <div>
            <!-- @click="addUser" -->
            <el-button class="btn">选择品牌</el-button>
        </div>
    </div>


    <!-- 表单 -->
    <div>
        <!--  -->
        <el-table border ref="multipleTableRef" :data="tabData">
            <el-table-column type="selection" />
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column property="brandName" label="品牌名称" />
            <el-table-column label="是否推荐">
                <template #default="scope">
                    <!-- @click="changeHandle(scope.row)" -->
                    <el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
            <el-table-column property="sort" label="排序">
            </el-table-column>
            <el-table-column property="endDate" label="状态">
                <template #default="scope">
                    {{ scope.row.recommendStatus === 1 ? '推荐中' : '未推荐' }}
                </template>
            </el-table-column>
            <el-table-column property="Address" label="操作" width="200px">
                <template #default="scope">
                    <!--  -->
                    <el-button type="primary" text size="small" @click="handelShow(scope.row)">设置排序</el-button>
                    <!--  @click="delectFn(scope.row.id)" -->
                    <el-button type="primary" text size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listparams.pageNum" v-model:page-size="listparams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
            @current-change="pageNumChange" :page-sizes="[5, 10, 20]" />
    </ElConfigProvider>

    <el-dialog v-model="setDialog" title="设置排序" width="30%">
        <el-form :model="tabData">
            <el-form-item label="排序" label-width="100px" prop="sort">
                <el-input v-model="SortNum" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="setDialog = false">取消</el-button>
                <el-button type="primary" @click="SureFn">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>import { user } from '@/api';
import { reactive, ref, toRefs } from 'vue';
import { Search, Tickets } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from 'element-plus';

interface Istate {
    tabData: getBrandlist[]
    listparams: {
        pageNum: number
        pageSize: number
        brandName: string
        recommendStatus: number
    },
    total: number

}


const state = reactive<Istate>({
    tabData: [],
    listparams: {
        pageNum: 1,
        pageSize: 5,
        brandName: '',
        recommendStatus: 0
    },
    total: 0,

})
const value = ref('')
const options = [
    {
        value: 0,
        label: '未推荐',
    },
    {
        value: 1,
        label: '推荐中',
    }
]
//获取列表数据
const getlist = () => {
    user.getBrandApi(state.listparams).then(res => {
        if (res.code === 200) {
            state.tabData = res.data.list
            console.log(res.data.list);
            state.total = res.data.total
        }
    })
}
getlist()


//查询
const searchFn = () => {
    user.searchBrandApi(state.listparams).then(res => {
        if (res.code === 200) {
            state.tabData = res.data.list
            console.log(res.data.list);
            state.total = res.data.total
        }
    })
}

//选择器
const selectFn = (val: any) => {
    state.listparams.recommendStatus = val
}
//分页功能
const pageSizeChange = () => {
    getlist()
}
const pageNumChange = () => {
    getlist()
}

//序号
const SortNum = ref(0)
//点击的ID
const IdNum = ref(0)
//弹出框显示隐藏
const setDialog = ref(false)
//设置排序
const handelShow = (row: getBrandlist) => {
    SortNum.value = row.sort
    IdNum.value = row.id
    setDialog.value = true
}

//确认
const SureFn = () => {
    ElMessageBox.confirm("是否确认修改排序", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        user.sureSetsortApi({ id: IdNum.value, sort: SortNum.value }).then(res => {
            if (res.code === 200) {
                ElMessage.success("修改排序成功")
                getlist()
                setDialog.value = false
            }
        })
    }).catch(() => {
        ElMessage('取消操作')
    })
}
let { listparams, total, tabData } = toRefs(state)

</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 30px 0;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }
}

.el-form {
    display: flex;

    .el-form-item {
        margin-right: 50px;
    }
}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #eee;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}
</style>